<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/6/14 0014
  Time: 下午 9:47
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <title>首页</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>

<div id="header">
    <form method="POST" action="#">
        <span id="image" class="glyphicon glyphicon-search" aria-hidden="true"></span>
        <input id="input" type="text" name="keywords" />
        <img src="img/yuyin.png" id="yuyin">
        <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
    </form>
</div>

<!-- 轮播图 -->

<div id="slideshow">
    <img id="imge" src="img/01.jpg" width="100%">
    <ul class="num"></ul>
</div>
<div id="middle">
    <table>
        <tr>
            <td><a href="homestay.jsp"><img src="img/index_1.png"></a></td>
            <td><a href="user_myWallet.jsp"><img src="img/index_2.png"></a></td>
            <td><a href="user_collect.jsp"><img src="img/index_3.png"></a></td>
            <td><a href="homestay.jsp"><img src="img/index_4.png"></a></td>
        </tr>
    </table>
    <div id="middle_division">
        <img src="img/middle.png" width="100%">
    </div>
</div>
<c:forEach var="folk" items="${folkList}">
<div id="bottom_img">
    <a href="/folk"><img id="img_1" src="${folk.folkImage}" width="100%"></a>
    <div id="homestay">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${folk.folkIntroduce}</p>
    </div>
</div>
</c:forEach>


<div id="bottom">
    <div class="bottom_button">
        <a href="/index"><img id="img1" src="img/1.png"></a>
        <a href="farm.jsp"><img id="img2" src="img/2_ago.png"></a>
        <a href="friendCirle.jsp"><img id="img3" src="img/3_ago.png"></a>
        <a href="user.jsp"><img id="img4" src="img/4_ago.png"></a>
    </div>
    <a href="index.jsp" id="txt1">首页</a>
    <a href="farm.jsp" id="txt2">农场</a>
    <a href="friendCirle.jsp" id="txt3">朋友圈</a>
    <a href="user.jsp" id="txt4">个人中心</a>
</div>
</div>

</body>

<script type="text/javascript">
    var img = new Array("01.jpg","02.jpg","03.jpg");
    var foot=0;
    function setpic(){
        var imgelement=document.getElementById("imge");
        if(foot>=img.length){
            foot=0;
        }
        imgelement.src="img/"+img[foot++];
        setTimeout(setpic,2000);
    }
    setpic();

    $(document).ready(function(){
        //限制字符个数
        $("#homestay").each(function(){
            var maxwidth=30;
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+'...');
            }
        });
    });
</script>
</html>
